<script setup>
import { ref } from 'vue'
import { ElementPlus, Monitor, Star, Tickets, Histogram, Money, Setting } from '@element-plus/icons-vue'
import { useSidebarStore } from '@/store'

// 获取侧边栏状态
const sidebarStore = useSidebarStore()
</script>

<template>
  <!-- 侧边栏 -->
  <el-aside :style="{ width: sidebarStore.isCollapse ? '64px' : '200px' }">
    <div class="el-aside__logo">
      <el-icon>
        <ElementPlus />
      </el-icon>
      {{ sidebarStore.isCollapse ? '' : '会员管理系统' }}
    </div>
    <!-- 菜单列表 -->
    <el-menu active-text-color="#409EFF" background-color="#232323" :default-active="$route.path" text-color="#fff"
      :collapse="sidebarStore.isCollapse" router>
      <!-- 一级菜单 -->
      <el-menu-item index="/data/browse">
        <el-icon>
          <Monitor />
        </el-icon>
        <span>数据概览</span>
      </el-menu-item>

      <!-- 多级菜单 -->
      <el-sub-menu index="/member">
        <!-- 多级菜单的标题 - 具名插槽 -->
        <template #title>
          <el-icon>
            <Star />
          </el-icon>
          <span>会员管理</span>
        </template>

        <!-- 多级菜单展开的内容(二级菜单) - 默认插槽 -->
        <el-menu-item index="/member/list">
          <el-icon>
            <Tickets />
          </el-icon>
          <span>会员列表</span>
        </el-menu-item>
        <el-menu-item index="/member/level">
          <el-icon>
            <Histogram />
          </el-icon>
          <span>会员等级</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 一级菜单 -->
      <el-menu-item index="/integral/manage">
        <el-icon>
          <Money />
        </el-icon>
        <span>积分管理</span>
      </el-menu-item>

      <!-- 一级菜单 -->
      <el-menu-item index="/system/set">
        <el-icon>
          <Setting />
        </el-icon>
        <span>系统设置</span>
      </el-menu-item>

    </el-menu>
  </el-aside>
</template>

<style lang="scss" scoped>
.el-aside {
  background-color: #232323;
  transition: width 0.3s ease;

  .el-aside__logo {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
    color: #fff;

    .el-icon {
      font-size: 22px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }

  .el-menu {
    border-right: none;
  }
}
</style>
